<template>
  <div class="login">
    <!-- 顶部背景色 -->
    <div class="header"></div>
    <div class="container">
      <div class="logo-box">
        <img src="../assets/logo.png" class="logo">
      </div>
      <div class="content">
        <div class="left">
          <!-- 二维码放大 -->
          <div v-if="isfull" class="full-img2d">
            <img src="../assets/6.png" class="big-img2d" @click="close()">
            <span>请用微信登录..</span>
          </div>
          <div class="img2-box">
            <img src="../assets/6.png" class="img2d" @click="open()">
          </div>
          <div class="message"><span>微信快速登录</span></div>
          <div class="form-box">
            <!-- 登录方式 -->
            <div style="display: flex;">
              <div style="width: 50%; text-align: center;"><button class="syt-btn" @click="btn1()"
                  :class="{ syt_btn_active: btn1Value }">密码登录</button></div>
              <div style="width: 50%; text-align: center;"><button class="syt-btn" @click="btn2()"
                  :class="{ syt_btn_active: btn2Value }">验证码登录</button></div>
            </div>
            <!-- 第一种登录方式 -->
            <div class="input-form" v-if="btn1Value">
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm" @keyup.enter.native="submitForm">
                <el-form-item label-width="0" prop="user">
                  <el-input prop="user" type="text" v-model="ruleForm.user" autocomplete="off"
                    placeholder="请输入常用手机号/邮箱"></el-input>
                </el-form-item>
                <el-form-item label-width="0" prop="password">
                  <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"
                    boder="none !important"></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-button type="primary" @click="submitForm()" class="login-btn">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
            <!-- 第二种登录方式 -->
            <div class="input-form" v-if="btn2Value">
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label-width="0" prop="user">
                  <el-input prop="user" type="text" v-model="ruleForm.user" autocomplete="off"
                    placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label-width="0" prop="password">
                  <el-input type="password" v-model="ruleForm.password" placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-button type="primary" @click="submitForm()" class="login-btn" id="login_btn">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 分割的竖线 -->
        <div class="v-dashed"></div>
        <!-- 右边盒子 -->
        <div class="right">
          <!-- 跳转到注册 -->
          <div class="back-register">
            <span>还没有账号:</span>
            <br>
            <router-link to="/register" style="color: rgba(0, 179, 138, 1); padding-top: 10px;">立即注册-></router-link>
          </div>
          <!-- 第三方登录 -->
          <div class="other-login">
            <div><span>使用一下账号直接登录：</span></div>
            <div>
              <img src="../assets/sina.png" @click="sina_btn()">
              <img src="../assets/wechat.png" @click="wechat_btn()">
              <img src="../assets/QQ.png" @click="QQ_btn()">
              <img src="../assets/baidu.png" @click="baidu_btn()">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/global.css"

export default {
  name: 'Login',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码或邮箱'));
      } else {
        if (this.ruleForm.password !== '') {
          this.$refs.ruleForm.validateField('password');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
    };
    return {
      ruleForm: {
        user: 'admin',
        password: '123',
      },
      btn1Value: true,
      btn2Value: false,
      isfull: false,
      rules: {
        user: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm() {
      if (this.ruleForm) {
        if (this.ruleForm.user == 'admin' && this.ruleForm.password == '123') {
          this.$router.push('/home')
        } else {
          alert('登录失败!');
          return false;
        }
      }
    },
    handleEnter() {
      this.click();
    },
    close() {
      this.isfull = !this.isfull
    },
    open() {
      this.isfull = !this.isfull
    },
    btn1() {
      this.btn1Value = true
      this.btn2Value = false
    },
    btn2() {
      this.btn2Value = true
      this.btn1Value = false
    },
    sina_btn() {
      alert("跳转到新浪！")
    },
    wechat_btn() {
      alert("跳转到微信页面")
    },
    QQ_btn() {
      alert("跳转到qq页面")
    },
    baidu_btn() {
      alert("跳转到百度页面")
    }
  }

}
</script>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.header {
  height: 40%;
  width: 100%;
  background-color: rgba(0, 179, 138, 1);
}

.container {
  position: absolute;
  top: 20%;
  width: 45%;
  display: flex;
  flex-direction: column;
}

.img2d {
  height: 80px;
  margin: 5px 5px;
  cursor: pointer;
}

.message {
  position: absolute;
  top: 1%;
  left: 22%;
  line-height: 150%;
  padding: 3px;
  box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, 0.15);
  z-index: 1000;
  color: rgba(166, 166, 166, 1);
}

.form-box {
  position: absolute;
  top: 0;
  padding: 100px 60px;
  background-color: white;
  z-index: 999;
  clip-path: polygon(88px 0, 100% 0, 100% 100%, 0 100%, 0 88px);
}

.syt-btn {
  border: none;
  font-size: 16px;
  padding: 5px 10px;
  color: rgba(56, 56, 56, 1);
  background-color: white;
  cursor: pointer;
  border-bottom: 1.5px solid white;
}

.syt_btn_active {
  border-bottom: 1.5px solid rgba(0, 179, 138, 1);
  color: rgba(0, 179, 138, 1);
}


.input-form {
  margin-top: 25px;
}

.el-input {
  margin-bottom: 20px;
}

.v-dashed {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 0;
  /* 不占宽度 */
  height: 200px;
  /* 虚线高度 */
  border-left: 1.5px dashed rgba(229, 229, 229, 1);
  margin: 0 auto;
  /* 居中（可选） */
}

.right {
  flex: 1;
  padding-left: 6%;
  display: flex;
  flex-direction: column;
}

.back-register {
  position: relative;
  top: 25%;
  margin-bottom: 70px;
}

a {
  font-weight: bold;
  text-decoration: none;
}

.other-login {
  position: relative;
  top: 20%;
}

img {
  margin-right: 15px;
  margin-top: 8px;
  height: 20px;
  filter: saturate(0) hue-rotate(0deg) brightness(1.0) contrast(1.0);
}

img:hover {
  cursor: pointer;
  filter: none
}

span {
  font-size: 14px;
  color: rgba(80, 80, 80, 1);
}

.content {
  display: flex;
  width: 100%;
  height: 500px;
  background-color: rgba(255, 255, 255, 1);
  z-index: 999;
  border: rgba(220, 225, 230, 1) solid 1px;
}

.left {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 55%;
}

.full-img2d {
  width: 91%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  background-color: white;
}

.big-img2d {
  height: 200px;
}

.img2-box {
  position: absolute;
  z-index: 100;
}

.img2-box—active {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: black;
  z-index: 1000;
}

.logo-box {
  width: 100%;
  text-align: left;
}

.logo {
  height: 35px;
  margin-bottom: 10px;
}

.login-btn {
  width: 100%;
  color: rgba(0, 179, 138, 1);
  border: rgba(0, 179, 138, 1) solid 1px;
  background-color: white;
}

.login-btn:hover {
  background-color: rgba(0, 179, 138, 1);
  border: rgba(0, 179, 138, 1);
  color: white;
}
</style>
